<template>
     <div class="login-container">
        <el-form class="login-form" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px">
        <div>
            <p class="login-title">用户登录</p>
            <div class="inforBox"><span v-if="loginErrorInfor">{{loginErrorInfor}}</span></div>
            <el-form-item prop="account">
                <el-input name="username" type="text" v-model="loginForm.account"  placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="loginForm.rUname">记住用户名</el-checkbox>
                <el-checkbox v-model="loginForm.rPass" class="rPass">记住密码</el-checkbox>
            </el-form-item>
            <div class="login-btn">
                <el-button type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
            </div>
            <span class="go" @click="goRegister">去注册</span>
        </div>
        </el-form>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {validateLoginUserInfor} from 'api/login'
export default {
  data () {
    return {
      loginErrorInfor: null, // 登录失败的提示
      loginForm: {
        account: '',
        password: '',
        rUname: false,
        rPass: false
      },
      loginRules: {
        account: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' },
          { min: 3, max: 16, message: '密码长度为6到16个字符', trigger: 'blur' }
          //   { pattern: /^[A-Za-z0-9]*$/, message: '您的密码错误', trigger: 'blur'}// 数字和字母组合
        ]
      },
      loading: false
    }
  },
  computed: {
    // ...mapGetters(['authType', 'avatar', 'username', 'schoolId'])
    ...mapGetters(['account', 'password'])
  },
  created () {
    this.loginForm.account = this.account
    this.loginForm.password = this.password
  },
  methods: {
    // 登陆
    handleLogin () {
      let account = this.loginForm.account
      let password = this.loginForm.password
      validateLoginUserInfor(account, password).then(res => {
        this.$store.dispatch('LoginByUsername', this.loginForm)
        //
      })
    },
    // 去注册
    goRegister () {
      this.$router.push('/register')
    }
  }
}
</script>
<style lang="scss" scoped>
.login-container{
    height: 100vh;
    .login-form{
        padding:30px;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        .login-title{
            height: 80px;
            line-height: 80px;
        }
        .go{
            font-size: 14px;
            position: absolute;
            right:40px;
            bottom:40px;
            cursor: pointer;
        }
    }
}
</style>
